<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>画一个太极</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>

<script>
  function g(id) {
    return document.getElementById(id);
  }

  var canvas = g('canvas');
  var ctx = canvas.getContext('2d');

  function initial() {
    ctx.fillStyle = 'yellow';
    ctx.rect(0, 0, 500, 500);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(250, 250, 200, Math.PI * .5, Math.PI * 1.5, true);
    ctx.fillStyle = 'red';
    ctx.fill();

    ctx.beginPath();
    ctx.arc(250, 250, 200, Math.PI * .5, Math.PI * 1.5, false);
    ctx.fillStyle = 'white';
    ctx.fill();

    ctx.beginPath();
    ctx.arc(250, 150, 100, 0, Math.PI * 2, true);
    ctx.fillStyle = 'white';
    ctx.fill();

    ctx.beginPath();
    ctx.arc(250, 350, 100, 0, Math.PI * 2, true);
    ctx.fillStyle = 'red';
    ctx.fill();

    ctx.beginPath();
    ctx.arc(250, 150, 20, 0, Math.PI * 2, true);
    ctx.fillStyle = 'red';
    ctx.fill();

    ctx.beginPath();
    ctx.arc(250, 350, 20, 0, Math.PI * 2, true);
    ctx.fillStyle = 'white';
    ctx.fill();
  }

  window.addEventListener('load', initial, false);
</script>
</body>
</html>